<script setup lang="ts">
import { onMounted, reactive } from "vue";

import { BackMain } from "@/stores/BackMain";

// 请求
import { getMenu } from "@/api/teacher/he/backMain";
import { getTeacher } from "@/api/teacher/he/backMain";
import router from "@/router";

const store = BackMain();
const student: any = reactive([
  [
    {
      image: "",
      username: "",
    },
  ],
]);

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(11);
  // console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(22);
  // console.log(key, keyPath);
};

onMounted(() => {
  router.push("/User");
  getMenu().then((res: any) => {
    if (res.data.msg == "请求成功") {
      store.getMenu(res.data.data);
    }
  });

  getTeacher().then((res) => {
    student.length = 0;
    if (res.data.msg == "请求成功") {
      student.push(res.data.data);
      // console.log(student[0]);
    }
  });
});

const goMain = () => {
  router.push("/FrontMain");
};
const exit = () => {
  router.push("/");
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- header -->
      <el-header>
        <div class="title">在线课堂后台管理系统</div>

        <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link right top">
            <div class="login" id="login">
              <el-image
                style="
                  width: 30px;
                  height: 30px;
                  border-radius: 30px;
                  margin-top: -10px;
                "
                :src="student[0].image"
                fit="fit"
              />
            </div>
            <!-- {{ student.image }} -->
            <div class="adduser">{{ student[0].name }}</div>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item @click="goMain">进入官网</el-dropdown-item> -->
              <el-dropdown-item @click="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>

      <!-- 内容 -->
      <el-main>
        <el-row>
          <el-col :span="4" class="left">
            <div class="menu">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                router="true"
              >
                <template v-for="item in store.menu[0]">
                  <el-menu-item :index="item.path">
                    <span>{{ item.name }}</span>
                  </el-menu-item>
                </template>
              </el-menu>
            </div>
          </el-col>

          <el-col :span="20" class="contentBox">
            <div class="content">
              <router-view></router-view>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

.iconfont {
  width: 50px !important;
  font-size: 16px;
}
.common-layout {
  height: 100vh;
  width: 100%;
}
/* header */
.el-header {
  background-color: #e2e2e2;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}
.title {
  margin-left: 50px;
}

/* main */
.el-main {
  margin: 0;
  padding: 0;
}
.el-main::-webkit-scrollbar {
  display: none;
}
.left {
  border-right: 3px solid #e2e2e2;
}
.left::-webkit-scrollbar {
  display: none;
}
.el-menu {
  /* height: 100vh; */

  /* box-shadow: 1px 0px 0px 5px #f5f7fa; */
}
.menu {
  border: 0;
}
.menu span {
  width: 100%;
  text-align: center;
}

/* content */
.contentBox {
  height: 100vh;
}
.content > div {
  height: 56px;
  line-height: 56px;
  padding-left: 10px;
}

.top {
  display: flex;
  align-items: center;
  margin-right: 50px;
}
</style>
@/stores/BackMain
